<template>
 <view>
  <view class="content">
    <view class="status_bar">
      <view class="top_view" v-if="topbackground"></view>
    </view>

    <view class="search">
      <image
        v-if="is_shanghu && index_logo"
        class="search_logo"
        :src="index_logo"
      ></image>
      <view v-else-if="is_shanghu"></view>

      <image
        v-if="!is_shanghu"
        class="search_logo"
        src="../../static/index_logo.png"
      ></image>
      <!-- <view class="search_text">亿数伽数创</view> -->

      <image
        class="search_icon"
        src="../../static/index_search_icon.png"
        @click="toJump"
      ></image>
    </view>

    <view class="top">
      <view v-if="swiper_list.length > 0">
        <u-swiper
          :list="swiper_list"
          height="280"
          :mode="swiper_list.length > 1 ? 'number' : 'none'"
          indicator-pos="topRight"
          :autoplay="true"
          interval="5000"
          duration="1000"
          bg-color="transparent"
          :border-radius="8"
          @change="swiperChange"
          @click="maskTouchend"
        ></u-swiper>
      </view>
    </view>

    <view class="u-tabs_line">
      <view
        class="u-tabs_wrapper"
        :class="nav_list.length ? `u-tabs_wrapper${nav_list.length}` : ''"
      >
        <!-- tab栏的背景效果 -->
        <view class="gradient">
          <view
            v-for="(item, index) in nav_list"
            :key="index"
            class="gradient_item"
            :class="current == index ? 'gradient_active' : ''"
          ></view>
        </view>

        <u-tabs
          class="tab"
          :list="nav_list"
          :is-scroll="false"
          :current="current"
          @change="tabsChange"
          height="96"
          swiperWidth="450"
          bar-height="4"
          bar-width="80"
          bg-color="transparent"
          font-size="36"
          active-color="#FFFFFF"
          inactive-color="#FFFFFF"
          :bar-style="barStyle"
        ></u-tabs>
      </view>
    </view>

    <view>
      <view class="exhibit" v-if="productList.length != 0">
        <view
          class="exhibit_item"
          v-for="(item, index) in productList"
          :key="item.id"
          @click="toGoodsDetail(item)"
        >
          <view class="exhibit_item_wrapper">
            <view class="exhibit_item_timer">
              <image
                class="exhibit_item_timerIcon"
                src="../../static/index_timer.png"
              ></image>

              <view class="exhibit_item_timerText">
                <view
                  v-if="
                    is_Coming_soon(item.opening_at) &&
                    !productList[index].startstate
                  "
                >
                  <text class="exhibit_item_sale1">即将开售</text>
                  <text class="exhibit_item_sale2">{{ item.start_at }}</text>
                </view>

                <view v-else-if="productList[index].startstate">
                  <text class="exhibit_item_sale1">即将开售</text>
                  <u-count-down
                    :timestamp="item.countDown"
                    separator="colon"
                    separator-color="#F78623"
                    style="margin-left: 8rpx"
                    separator-size="28"
                    font-size="28"
                    @end="end(index)"
                    color="#F78623"
                    :show-border="false"
                    bg-color="##000000"
                  ></u-count-down>
                  <!-- <view class="unpaid_left">后关闭</view> -->

                  <!-- <text class="exhibit_item_sale1">开售</text> -->
                </view>

                <view v-else>
                  <text class="exhibit_item_sale2">已开售</text>
                </view>
              </view>
            </view>

            <view
              class="exhibit_item_timer"
              style="margin-top: 40px"
              v-if="
                item.first_buy_at != null &&
                userInfo &&
                userInfo.total_first_buy_num != 0 &&
                productList[index].firstcountDown > 0
              "
            >
              <image
                class="exhibit_item_timerIcon"
                src="../../static/index_timer.png"
              ></image>

              <view class="exhibit_item_timerText">
                <view
                  v-if="
                    !productList[index].firststate &&
                    productList[index].firstcountDown > 0
                  "
                >
                  <text class="exhibit_item_sale1">优先购时间</text>
                  <text class="exhibit_item_sale2">{{
                    item.first_start_at
                  }}</text>
                </view>

                <view
                  v-else-if="
                    productList[index].firststate &&
                    productList[index].firstcountDown > 0
                  "
                >
                  <text class="exhibit_item_sale1">优先购时间</text>
                  <u-count-down
                    :timestamp="item.firstcountDown"
                    separator="colon"
                    separator-color="#F78623"
                    style="margin-left: 8rpx"
                    separator-size="28"
                    font-size="28"
                    @end="end(index)"
                    color="#F78623"
                    :show-border="false"
                    bg-color="##000000"
                  ></u-count-down>
                </view>
              </view>
            </view>

            <image class="exhibit_item_goodsImage" :src="item.cover"></image>
          </view>

          <view class="exhibit_item_bottom">
            <view class="exhibit_item_row">
              <view class="exhibit_item_column1">{{ item.name }}</view>
              <view class="exhibit_item_column2">
                <view class="exhibit_item_limited">限量</view>
                <view class="exhibit_item_inStock">{{ item.total_num }}份</view>
              </view>
            </view>
            <view class="exhibit_item_row">
              <view class="exhibit_item_column3">
                <image
                  class="exhibit_item_avatar"
                  :src="item.creator_avatar"
                ></image>
                <view class="exhibit_item_username">{{
                  item.creator_name
                }}</view>
              </view>
              <view class="exhibit_item_column4">¥ {{ item.price }}</view>
            </view>

            <view class="exhibit_item_row">
              <view class="exhibit_item_newButton">
                <template v-if="item.type == 1">
                  <text v-if="item.is_have_surplus_num == 0">已售罄</text>

                  <text
                    v-else-if="
                      userInfo &&
                      userInfo.is_frist_buy == 1 &&
                      item.first_buy_at &&
                      !is_Coming_soon(item.first_buy_at)
                    "
                    >抢购</text
                  >

                  <text v-else>抢购</text>
                </template>

                <template v-else>
                  <text v-if="!is_Coming_soon(item.opening_at)">已结束</text>

                  <text
                    v-else-if="
                      item.is_reserved_apply == 1 &&
                      is_Coming_soon(item.opening_at)
                    "
                    >已预约</text
                  >

                  <text v-else>预约</text>
                </template>
              </view>
            </view>

            <!-- <view class="exhibit_item_left">
              <view class="exhibit_item_first">{{ item.name }}</view>
              <view class="exhibit_item_group">
                <view class="exhibit_item_second">
                  <view class="exhibit_item_limited">限量</view>
                  <view class="exhibit_item_inStock"
                    >{{ item.total_num }}份</view
                  >
                </view>
                <view
                  class="exhibit_item_second"
                  v-if="item.is_show_surplus_num"
                >
                  <view class="exhibit_item_limited">剩余</view>
                  <view class="exhibit_item_inStock"
                    >{{ item.surplus_num }}份</view
                  >
                </view>
              </view>
              <view class="exhibit_item_third">
                <image
                  class="exhibit_item_avatar"
                  :src="item.creator_avatar"
                ></image>
                <view class="exhibit_item_username">{{
                  item.creator_name
                }}</view>
              </view>
            </view> -->

            <!-- 	<view class="" style="color: #FFFFFF;">
					<text>{{item.no}}</text>
				</view> -->

            <!-- <view class="exhibit_item_right">
              <template v-if="item.type == 1">
                <view
                  v-if="item.is_have_surplus_num == 0"
                  class="exhibit_item_buttonGray"
                  >已售罄</view
                >

                <view
                  v-else-if="
                    userInfo &&
                    userInfo.is_frist_buy == 1 &&
                    item.first_buy_at &&
                    !is_Coming_soon(item.first_buy_at)
                  "
                  class="exhibit_item_button"
                  >抢购</view
                >
                <view
                  v-else
                  class="exhibit_item_button"
                  :class="
                    is_Coming_soon(item.opening_at)
                      ? 'exhibit_item_buttonGray'
                      : ''
                  "
                  >抢购</view
                >
              </template>
              <template v-else>
                <view
                  v-if="!is_Coming_soon(item.opening_at)"
                  class="exhibit_item_buttonGray"
                  >已结束</view
                >

                <view
                  v-else-if="
                    item.is_reserved_apply == 1 &&
                    is_Coming_soon(item.opening_at)
                  "
                  class="exhibit_item_buttonGray"
                  >已预约</view
                >

                <view v-else class="exhibit_item_button">预约</view>
              </template>

              <view class="exhibit_item_price">¥ {{ item.price }}</view>
            </view> -->
          </view>
        </view>
      </view>

      <empty :show.sync="productList.length == 0 && pagestate"></empty>

      <!-- <view  v-else>
			<image src="/static/NoData.png" mode="" style="position: relative;left: 10%;" ></image>
			<view class="" style="text-align: center;" >
				<text style="">— 暂无数据 —</text>
			</view>
		</view> -->
    </view>

    <u-modal
      v-model="isupdata"
      @confirm="updataconfirm"
      content="检测到新版本"
      title="更新"
      confirm-text="确定"
    ></u-modal>

    <view class="update">
      <u-popup
        v-model="showPopup"
        mode="center"
        :mask-close-able="false"
        :custom-style="{ background: 'transparent' }"
        width="320rpx"
      >
        <view class="popup_box">
          <view class="popup_box_title">下载中</view>
          <u-circle-progress
            active-color="#101217"
            :percent="progress"
            inactive-color="#ffffff"
            bg-color="transparent"
          >
            <view class="u-progress-content">
              <view class="u-progress-dot"></view
              ><text class="u-progress-info">{{ progress }}%</text>
            </view>
          </u-circle-progress>

          <!-- @click="cancelDownload" -->
          <!-- <button class="popup_btn">Cancel download</button> -->
        </view>
      </u-popup>
    </view>
  </view>
  <tabbar :key="gettoken" :current="0"></tabbar>
 </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import moment from "moment";
import { isLogin } from "@/utils/auth.js";
import empty from "@/components/empty/empty";
import { getTimeleft } from "@/utils/timeleft.js";
import tabbar from "../../components/tabbar/tabbar.vue";
export default {
  data() {
    return {
      widHeigh: 0,
      nav_list: [
        { name: "热门产品" },
        // { name: "平台自营" },
        // { name: "精选联盟" },
      ],
      current: 0,
      barStyle: {
        background: "transparent",
      },
      swiper_list: [],
      swiperwhole: [],
      swiperIndex: "",

      page: 1,
      limit: 10,
      productList: [],
      order_no: "",

      userInfo: null,
      pagestate: false,

      isupdata: false,
      showPopup: false,
      progress: 0,
      update_url: "",
      startstate: false,
      force: false,
      topbackground: false,

      category: [],

      index_logo: "",
      is_shanghu: uni.getStorageSync("unique_code"),
      gettoken:null
    };
  },
  components:{
    tabbar
  },
  async onLoad(options) {
    let token = options.token;
    // console.log('-----token', token);
    if (token) {
      uni.setStorageSync("token", token);
      let res = await api.info({});
      uni.setStorageSync("userInfo", res.data);
    }

    let windowElement = uni.getSystemInfoSync();
    this.widHeigh = windowElement.windowHeight;

    this.getBanners();
    // this.getipAddress()
  },
  async onShow() {
    await this.checkApp();
    this.getCategory();
    this.getProductList(true);
    this.getUserInfo();
    this.getLogo();
    this.gettoken = uni.getStorageSync("token")
  },
  //监听页面滚动
  onPageScroll(e) {
    // 状态栏高度44px
    if (e.scrollTop < 44) {
      this.topbackground = false;
    } else {
      this.topbackground = true;
    }
  },
  // 页面的触底事件
  onReachBottom() {
    console.log("+++++++页面的触底事件++++++++");
    this.page++;
    this.$u.throttle(this.getProductList(), 1000, true);
  },
  // 页面下拉刷新
  onPullDownRefresh() {
    this.getProductList(true);
  },
  onTabItemTap(e) {
    // uni.startPullDownRefresh();
    console.log("点击tab");
    this.getProductList(true);
  },
  computed: {
    // 返回true表示开售时间还没到
    is_Coming_soon() {
      return (time) => {
        return moment(time).diff(moment(), "second") > 0;
      };
    },
  },
  methods: {
    async getCategory() {
      let res = await api.category({
        method: "get",
        query: {},
      });
      if (res.code === 0) {
        this.category = res.data;
        let nav_list = res.data;
        this.nav_list = [{ name: "热门产品" }].concat(
          nav_list.map((x) => ({
            name: x.name,
          }))
        );

        this.$forceUpdate();
      } else {
        tip.defaults(res.msg);
      }
    },

    async getLogo() {
      if (!this.is_shanghu) {
        return;
      }

      let res = await api.getLogo({
        method: "get",
        query: {},
      });

      if (res.code === 0) {
        this.index_logo = res.data.url;
      } else {
        tip.defaults(res.msg);
      }
    },

    end(index) {
      // console.log(this.productList[index])

      this.productList[index].startstate = false;
      this.productList[index].firststate = false;
      this.getProductList(true);
    },
    //热更新
    async checkApp() {
      // 获取版本号
      // #ifdef APP-PLUS
      plus.runtime.getProperty(plus.runtime.appid, async (widgetInfo) => {
        let res = await api.updateApp({
          method: "get",
          query: {
            version: widgetInfo.version,
          },
        });

        if (res.code === 0) {
          console.log("----checkApp res----", res);
          if (res.data.download_url) {
            this.isupdata = true;
            this.force = true;
            this.update_url = res.data.download_url;
            return;
          }
          if (res.data.update_url) {
            // this.globalData.update_url = res.data;
            this.update_url = res.data.update_url;
            this.isupdata = true;
          } else {
            // this.globalData.update_url = "";
            this.update_url = "";
            this.isupdata = false;
          }
        }
      });
      // #endif
    },

    updataconfirm() {
      console.log("updataconfirm函数-------");
      if (this.force) {
        plus.runtime.openURL(this.update_url);
        return;
      }
      this.showPopup = true;
      this.downUpdate();
    },

    // 下载文件
    async downUpdate() {
      this.downloadTask = await uni.downloadFile({
        url: this.update_url,
        success: (res) => {
          console.log("-----downUpdate res----", res);
          if (res.statusCode === 200) {
            console.log("下载成功");

            this.installWgt(res.tempFilePath);
          }
        },
        fail: (err) => {
          console.log("下载失败", err);
        },
      });

      this.downloadTask.onProgressUpdate((res) => {
        this.$u.throttle(() => {
          this.progress = parseInt(res.progress);
          console.log("--progress---", this.progress);
        }, 500);
        // 测试条件，取消下载任务。
        if (res.progress == 100) {
          this.showPopup = false;
        }
      });
    },

    // 更新应用资源
    installWgt(path) {
      plus.nativeUI.showWaiting("更新中...");
      plus.runtime.install(
        path,
        {},
        function () {
          plus.nativeUI.closeWaiting();
          console.log("安装wgt文件成功！");
          plus.nativeUI.alert("更新成功", function () {
            plus.runtime.restart();
          });
        },
        function (e) {
          plus.nativeUI.closeWaiting();
          console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
          plus.nativeUI.alert("更新失败[" + e.code + "]：" + e.message);
        }
      );
    },

    //获取ip地址
    getipAddress() {
      uni.request({
        url: "http://pv.sohu.com/cityjson?ie=utf-8",
        method: "POST",
        success: (res) => {
          const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
          let ip = reg.exec(res.data);
          uni.setStorageSync("ipAddress", ip[0]);
        },
      });
    },
    // Swiper改变时获取到下标
    swiperChange(index) {
      this.swiperIndex = index;
    },
    maskTouchend(index) {
      if (this.swiperwhole[index].link_type == 1) {
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.swiperwhole[index].link_to);
        // #endif

        // #ifdef H5
        window.open(this.swiperwhole[index].link_to);
        // #endif

        // plus.runtime.openURL(this.swiperwhole[index].link_to);
        // uni.navigateTo({
        //   url:`/pages/webview/webview?url=${this.swiperwhole[index].link_to}`,
        // });
      }
    },

    toCollectRecord() {
      uni.navigateTo({
        url: `../../pages/collect_record/collect_record`,
      });
    },

    async getUserInfo() {
      let token = uni.getStorageSync("token");
      if (!token) {
        return;
      }

      let res = await api.info({
        method: "get",
        query: {},
      });
      if (res.code === 0) {
        this.userInfo = res.data;

        // uni.setStorageSync("userInfo", res.data);
        // if (res.data.is_need_setting_operation_password == 1) {
        //   tip.defaults("交易密码已失效,请重置");
        //   setTimeout(() => {
        //     uni.navigateTo({
        //       url: `/pages/forget_trading/forget_trading`,
        //     });
        //   }, 2000);
        //   return;
        // }
      } else {
        tip.defaults(res.msg);
      }
    },

    async getProductList(refresh) {
      if (refresh) {
        this.page = 1;
      }
      let res = await api.productList({
        method: "get",
        query: {
          page: this.page,
          limit: this.limit,
          keyword: "",

          product_category_id:
            this.category.length > 0 && this.current != 0
              ? this.category[this.current - 1].id
              : "",
        },
        loading: "加载中",
      });
      if (res.code === 0) {
        uni.stopPullDownRefresh();
        if (refresh) {
          this.productList = res.data;
          this.pagestate = true;
        } else {
          this.productList = this.productList.concat(res.data);
        }
        this.productList.forEach((el) => {
          let newTime = moment();
          el.countDown = getTimeleft(el.opening_at, newTime).duration;
          if (el.countDown > 0 && el.countDown <= 86400) {
            el.startstate = true;
          } else {
            el.startstate = false;
          }
          el.start_at = el.opening_at.substring(5, el.opening_at.length - 3);
          if (el.first_buy_at != null) {
            el.firststate = false;

            el.first_start_at = el.first_buy_at.substring(
              5,
              el.first_buy_at.length - 3
            );

            el.firstcountDown = getTimeleft(el.first_buy_at, newTime).duration;

            if (el.firstcountDown > 0 && el.firstcountDown <= 86400) {
              el.firststate = true;
            }
          }
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    // 获取轮播图
    async getBanners() {
      let res = await api.banners({
        method: "get",
        query: {},
      });
      if (res.code === 0) {
        this.swiper_list = res.data.data.map((x) => x.cover_url);
        this.swiperwhole = res.data.data;
      } else {
        tip.defaults(res.msg);
      }
    },

    async handleCreateOrder(product_id, time) {
      // if (moment(time).diff(moment(), "second") > 0) {
      //   tip.defaults("未到开售时间");
      //   return;
      // }
      // const res = await api.productCreateOrder({
      //   method: "post",
      //   query: {
      //     product_id: product_id,
      //   },
      // });
      // if (res.code == 0) {
      //   this.order_no = res.data;
      //   if (res.data) {
      //     this.pay();
      //   }
      // } else {
      //   tip.defaults(res.msg);
      // }
    },

    async pay() {
      const res = await api.pay({
        method: "post",
        query: {
          pay_type: 3,
          order_no: this.order_no,
        },
      });

      if (res.code == 0) {
        var params = res.data;
        // App上生效
        let orderInfo = {
          appid: params.appid, //对应的appid
          noncestr: params.noncestr,
          package: params.package,
          partnerid: params.partnerid,
          prepayid: params.prepayid,
          timestamp: params.timestamp,
          sign: params.sign, //二次签名
        };
        uni.requestPayment({
          provider: "wxpay", // wxpay、alipay
          orderInfo: JSON.stringify(orderInfo), //微信、支付宝订单数据
          success: function (res) {
            tip.success("支付成功");
            console.log("res", res);
          },
          fail: function (err) {
            tip.defaults("支付失败");
            console.log("err", err);
          },
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    // 预约
    async handleReservedApply(product_id) {
      // const res = await api.reservedApply({
      //   method: "post",
      //   query: {
      //     product_id: product_id,
      //   },
      // });
      // if (res.code == 0) {
      //   tip.defaults("预约成功");
      // } else {
      //   tip.defaults(res.msg);
      // }
    },

    tabsChange(index) {
      this.current = index;

      this.getProductList(true);
    },
    async toGoodsDetail(item) {
      // await isLogin();
      if (item.ios_product_inside_buy) {
        this.applepay(item.ios_product_inside_buy.ios_product_id);
        return;
      }
      // if (uni.getStorageSync("token") == "") {
      //   uni.navigateTo({
      //     url: "../signin/signin",
      //   });
      //   return;
      // }
      uni.navigateTo({
        url: `../../pages/goods_detail/goods_detail?product_id=${item.id}`,
      });
    },
    async toJump() {
      // await isLogin();
      uni.navigateTo({
        url: `../../pages/index_search/index_search`,
      });
    },
    applepay(id) {
      var iap = null; //保存应用内支付对象
      plus.payment.getChannels(
        function (channels) {
          console.log(channels, "channelschannelschannels");
          for (var i in channels) {
            var channel = channels[i];
            // 获取 id 为 'appleiap' 的 channel
            if (channel.id === "appleiap") {
              iap = channel;

              var ids = [id];
              // iap 为应用内支付对象
              iap.requestOrder(
                ids,
                function (e) {
                  // 获取订单信息成功回调方法
                  console.log("requestOrder success: " + JSON.stringify(e));
                },
                function (e) {
                  // 获取订单信息失败回调方法
                  console.log("requestOrder failed: " + JSON.stringify(e));
                }
              );
            }
          }
        },
        function (e) {
          console.log("获取iap支付通道失败：" + e.message);
        }
      );
    },

    // scroll-view 的触底事件
    // onreachBottom() {
    //   console.log("触发 onreachBottom");
    //   this.page++;
    //   this.$u.throttle(this.getProductList(), 1000, true);
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 0 30rpx 0 30rpx;
  background: $bg-color1;

  // background-image: url(../../static/index_bg.png);
  // background-repeat: no-repeat;
  // background-size: 100% 510rpx;

  background-image: url("/static/background_mine.png");
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: 100%;

  min-height: calc(100vh - 44px);
}
.status_bar {
  margin: 0 -30rpx;
  height: var(--status-bar-height);
  width: 750rpx;
}
.top_view {
  height: var(--status-bar-height);
  width: 750rpx;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: $bg-color1;
}
.search {
  margin-bottom: 22rpx;
  width: 690rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &_logo {
    // width: 340rpx;
    // height: 42rpx;
    width: 414rpx;
    height: 42rpx;
  }
  &_icon {
    width: 40rpx;
    height: 40rpx;
  }
  &_text {
    height: 56rpx;
    font-size: 40rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
  }
}
.top {
  width: 690rpx;
  height: 280rpx;
  border-radius: 24rpx;
  &_image1 {
    width: 690rpx;
    height: 280rpx;
  }
}
.u-tabs_line {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .u-tabs_wrapper {
    width: 70%;
    position: relative;
    z-index: 1;
    .gradient {
      width: 100%;
      height: 100rpx;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      &_item {
        // flex: 1;
        width: 120rpx;
        height: 20rpx;
      }
      &_active {
        filter: blur(8rpx);
        // background: linear-gradient(180deg, #39a2ff 0%, #d5280a 100%);
      }
    }
  }
  .u-tabs_wrapper1 {
    width: 30%;
  }
  .u-tabs_wrapper2 {
    width: 50%;
  }
  .u-tabs_wrapper3 {
    width: 70%;
  }
  .u-tabs_wrapper4 {
    width: 100%;
  }
}
.exhibit {
  min-height: calc(100vh - 392rpx);
  overflow: hidden;
  &_item {
    width: 690rpx;
    // height: 904rpx;
    height: 992rpx;
    background: #1d1d28;
    border-radius: 36rpx;

    background-image: url("/static/index_goods_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    &_wrapper {
      position: relative;
      width: 690rpx;
      height: 690rpx;
    }
    &_timer {
      z-index: 1;
      position: absolute;
      top: 26rpx;
      left: 26rpx;

      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      // width: 408rpx;
      height: 60rpx;
      border-radius: 30rpx;
      // opacity: 0.46;
      // background-color: rgba(0, 0, 0, 0.46);

      background: #000000;
      opacity: 0.5;
    }
    &_timerIcon {
      width: 32rpx;
      height: 32rpx;
    }
    &_timerText {
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      // opacity: 0.46;
    }
    &_sale1 {
      color: #ffffff;
      margin-left: 8rpx;
    }
    &_sale2 {
      color: #ffffff;
      margin-left: 8rpx;
    }
    &_goodsImage {
      border-radius: 36rpx;
      width: 690rpx;
      height: 690rpx;
    }
    &_bottom {
      margin-top: 30rpx;
      // display: flex;
      // align-items: flex-end;
      // justify-content: space-between;
    }
    &_row {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &_row:not(:first-child) {
      margin-top: 16rpx;
    }
    &_column1 {
      width: 400rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_column2 {
      display: flex;
      align-items: center;

      margin: 20rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;

      // width: 202rpx;
      height: 34rpx;
      border-radius: 4rpx;
    }
    &_column3 {
      display: flex;
      align-items: center;

      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
    &_column4 {
      // width: 140rpx;
      height: 48rpx;
      font-size: 40rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 48rpx;
    }
    &_newButton {
      margin: 20rpx auto;
      width: 610rpx;
      height: 90rpx;
      background: $button;
      background-repeat: no-repeat;
      background-size: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 90rpx;
    }
    &_left {
      margin: 30rpx 0 0 30rpx;
    }
    &_right {
      position: relative;
      height: 138rpx;
      margin: 46rpx 30rpx 0 0;
    }
    &_first {
      width: 460rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_group {
      display: flex;
    }
    &_second {
      display: flex;
      align-items: center;

      margin: 20rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;

      // width: 202rpx;
      height: 34rpx;
      border-radius: 4rpx;
    }
    &_second:not(:first-child) {
      margin-left: 30rpx;
    }
    &_limited {
      // width: 76rpx;
      padding: 0 14rpx;
      height: 34rpx;
      color: $text-color4;
      background: $gradient1;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 4rpx;
      text-align: center;
    }
    &_inStock {
      padding: 0 14rpx;
      // margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
      background: $bg-color2;
    }
    &_surplus {
      margin-left: 30rpx;
      width: 200rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      height: 44rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
    }
    &_third {
      display: flex;
      align-items: center;

      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
    &_avatar {
      border-radius: 50%;
      margin-right: 8rpx;
      width: 36rpx;
      height: 36rpx;
    }
    &_username {
      width: 320rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
    &_button {
      margin-left: calc(100% - 116rpx);
      width: 116rpx;
      height: 56rpx;
      color: $text-color4;
      background: $button;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 28rpx;
      text-align: center;

      font-size: 28rpx;
      font-weight: 400;
      line-height: 56rpx;
    }
    &_buttonGray {
      margin-left: calc(100% - 116rpx);
      width: 116rpx;
      height: 56rpx;
      background: #999999;
      border-radius: 28rpx;
      text-align: center;

      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 56rpx;
    }
    &_price {
      position: absolute;
      right: 0;
      width: 270rpx;
      text-align: right;

      margin-top: 34rpx;
      font-size: 40rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 48rpx;
    }
  }
  &_item:not(:first-child) {
    margin-top: 30rpx;
  }
  &_item:last-child {
    margin-bottom: 30rpx;
  }
}
.popup_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  // width: 50%;
  // height: 50%;

  // margin: 0 0 0 50%;
  // transform: translateX(-50%);
  padding: 30upx;
  border-radius: 16rpx !important;
}
.u-progress-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-progress-dot {
  // width: 16rpx;
  // height: 16rpx;
  // border-radius: 50%;
  // background-color: #fb9126;
}

.u-progress-info {
  font-size: 28rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
}
.popup_btn {
  margin-top: 30rpx;
  color: #ffffff;
  // background: ;
}
.popup_box_title {
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}
</style>
